<template>
	<view class="container">
		<!-- 头部已解锁的四个盒子 -->
		<view class="top">
			<view class="top-one" v-for="(item,index) in content" :key="index">
				<view class="jinxingzhong">
					<image src="../../static/jinxingzhong.png" mode="widthFix"></image>
				</view>
				<navigator url="datixiangqing"><image :src="item.png"></image></navigator>
				<p>{{item.title}}</p>
			</view><!--top-one-->
		</view><!--top-->
		<!-- <view class="tanchuang" v-show="shows">
			<view class="tishi">提示</view>
			<view class="content">您的步数还未到达该地区，无法答题哦</view>
			<view class="but">
				<button type="button" @click="quxiao">取消</button>
				<button type="button" class="queren" @click="queren">确认</button>
			</view>
		</view> -->
	</view><!--container-->
</template>

<script>
	export default {
		data() {
			return {
				content:{},
				shows:false
			} 
		},
		onLoad() {
			this.$http(this.$api.dati, {})
				.then((res) => {
					console.log(res);
					this.content=res.data
				})
		},
		methods: {
			show1:function(){
				this.shows=true
			},
			queren:function(){
				this.shows=false
			},
			quxiao:function(){
				this.shows=false
			}
		},
		onLoad() {
			uni.request({
				url:'http://180.76.120.179:8081/xiaochengxu/index/answer',
				success: (res) => {
					console.log(res)
				}
			})
		}
	}
</script>

<style>
.top{flex-wrap:wrap;display:flex;flex-direction:row;justify-content:space-between;padding:10px;}
.top-one{border:2px solid #ccc;width:48%;padding:10px;box-sizing:border-box;margin-bottom:10px;border-radius:5px;position:relative;}
.top-one image{width:100%;height:100px;}
.top-one p{text-align:center;font-size:14px;}
/* 进行中图片 */
.jinxingzhong image{width:20%;height:20%;position: absolute;top:-2px;right:-2px;border-radius:10px;}
/* 头部已解锁的四个盒子 */
/* .top{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;}
.top-one{border:1px solid #666;width:50%;padding:14px 14px 0 14px;box-sizing:border-box;border-radius:10px;position:relative;margin-right:10px;}
.top-one:last-child{margin-right:0;}
.top-one image{width:100%;text-align:center;}
.top-one p{text-align:center;line-height:25px;} */
/* 尾部未解锁的四个盒子 */
/* .footer{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;}
.footer:last-child{margin-bottom:0;}
.footers{width:50%;position:relative;margin-right:10px;}
.footers:last-child{margin-right:0;}
.footer-one{padding:14px 14px 0 14px;box-sizing:border-box;border-radius:10px;}
.footer-one image{width:100%;text-align:center;}
.footer-one p{text-align:center;line-height:25px;}
.suo{background-color:rgba(0, 0, 0, 0.5);position:absolute;top:0;left:0;z-index:1000;border-radius:10px;width:100%;height:100%;}
.suo image{width:60px;height:60px;margin-left:30%;margin-top:15%;} */
/* 弹出层 */
/* .tanchuang{width:80%;margin:0 auto;background-color:#fff;position:fixed;top:150px;z-index: 1000;left:10%;border-radius: 5px;border: 1px solid #ccc;}
.tishi{text-align:center;font-size:20px;padding-top:30px;margin-bottom: 10px;}
.content{text-align:center;padding: 0 10px; padding-bottom: 30px;font-size: 20px;color: #666;}
.but{display:flex;flex-direction:row;justify-content:space-between;}
.but button{width:50%;background-color:#fff;height: 60px;line-height: 60px;border:none;}
.queren{color:#00f;} */
</style>
